import React, { Component } from 'react';
import Layout from './Layout';
import { View, StyleSheet, Text, Image } from 'react-native';
import { Content, Thumbnail } from 'native-base';
import Service from '../components/Service';
import Shops from '../components/Shops';

export default class Home extends Component {
    render() {
        return (
            <Layout {...this.props}>
                <Content style={{backgroundColor:"#fafafa"}}>
                    <View style={styles.flexLay}>
                        <Image style={styles.logo} source={require("../static/logo.jpg")}/>
                        <Thumbnail style={styles.avatar} source={require("../static/kaneki.jpeg")} />
                    </View>
                    <Service />
                    <View style={styles.nearby}>
                        <Text style={styles.nearbyText}>附近门店</Text>
                    </View>
                    <Shops {...this.props}/>
                </Content>
            </Layout>
        );
    }
}

const styles = StyleSheet.create({
    flexLay: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: '#252527',
        height: 80,
    },
    logo: {
        height: 80,
        width: 200
    },
    avatar: {
        marginTop: 10,
        marginRight: 10
    },
    nearby: {
        height: 50,
        paddingLeft: 20,
        paddingRight: 20
    },
    nearbyText: {
        lineHeight: 50,
        fontSize: 18
    }
});